<template>
  <div class="message_detail">
    <div class="mesBox" v-for="item in chatStore.messageList" :key="item.message.body.id">
      <div v-if="userInfoStore.userInfo.id === item.fromUser.uid" class="right talk_wrapper
      ">
        <div class="talk">{{ item.message.body.content }}</div>
        <img :src="userInfoStore.userInfo.avatar" alt="">
      </div>
      <div v-if="userInfoStore.userInfo.id !== item.fromUser.uid" class="left talk_wrapper">
        <img :src="item?.fromUser?.avatar" alt="">
        <div class="talk">{{ item.message.body.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useChatsStore } from '@/stores/module/chats/chats';
import { useUserInfoStore } from '@/stores/module/user/userInfo';
const userInfoStore = useUserInfoStore()
const chatStore = useChatsStore()


</script>

<style lang="less" scoped>
.message_detail {
  // width: 98%;
  // height: 100%;
  padding: 12px;
  // overflow-y: scroll;

  .mesBox {
    padding: 10px;

    .talk_wrapper {
      // width: 98%;
      padding: 3px;
      display: flex;
      line-height: 32px;

      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
    }

    .right {
      display: flex;
      justify-content: end;


      .talk {
        margin-right: 5px;
        white-space: normal;
        word-break: break-all;
        overflow-wrap: break-word;
        max-width: 92%;
      }
    }

    .left {
      display: flex;
      justify-content: start;

      .talk {
        white-space: normal;
        word-break: break-all;
        overflow-wrap: break-word;
        max-width: 92%;
      }

      img {
        margin-left: 5px;
      }
    }
  }
}
</style>
